<template>
  <div class="callOrder">
    <el-table-form ref="form" :model="query">
      <el-form-item label="来电日期" prop="happendDt">
        <el-date-picker
          v-model="query.happendDt"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          :clearable="false"
        />
      </el-form-item>

      <template v-slot:btns>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getData()"
        >查询</el-button>
      </template>
    </el-table-form>
    <div class="chart-body">
      <Charts :options="option" />
    </div>
  </div>
</template>

<script>
  import Charts from '@/components/Charts'
  import { callOrderList } from '@/api'
  import dayjs from 'dayjs'
  export default {
    name: 'callOrder',
    components: {
      Charts
    },
    data() {
      return {
        query: {
          happendDt: new Date()
        },
        option: {}
      }
    },
    mounted() {
      // this.chartsInit();
      this.getData()
    },
    methods: {
      search() {},
      // 初始化chart
      chartsInit(data) {
        const xAxisData = []
        const wwcCount = []
        const tdCount = []
        const ywcCount = []
        const tempmap = {}
        data.forEach((v) => {
          if (!tempmap[v.transactor]) {
            tempmap[v.transactor] = {
              1: 0,
              2: 0,
              3: 0
            }
          }
          const info = tempmap[v.transactor]
          if (v.orderStatus === 10) {
            info[2] += v.orderCount
          } else if (v.orderStatus === 7) {
            info[3] += v.orderCount
          } else {
            info[1] += v.orderCount
          }
        })

        for (const key in tempmap) {
          const item = tempmap[key]
          xAxisData.push(key)
          wwcCount.push(item[1])
          ywcCount.push(item[2])
          tdCount.push(item[3])
        }

        this.option = {
          title: {
            text: `话务员${dayjs(this.query.happendDt).format('YYYY-MM-DD')}日订单分类统计`
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },

              saveAsImage: {
                show: true
              }
            }
          },
          calculable: false,
          legend: {
            data: [
              {
                name: '未完成',
                textStyle: {
                  color: 'red'
                }
              },
              {
                name: '退单',
                textStyle: {
                  color: 'blue'
                }
              },
              {
                name: '已完成',
                textStyle: {
                  color: 'green'
                }
              }
            ]
          },
          xAxis: [
            {
              axisLabel: {
                interval: 0
              },
              type: 'category',
              data: xAxisData
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              axisLabel: {
                formatter: '{value}/个'
              }
            }
          ],
          series: [
            {
              name: '未完成',
              type: 'bar',
              stack: '总量',
              color: ['#FF7F51'],
              label: {
                normal: {
                  show: false
                }
              },
              data: wwcCount
            },
            {
              name: '已完成',
              type: 'bar',
              stack: '总量',
              color: ['#DA70D6'],
              label: {
                normal: {
                  show: false
                }
              },
              data: ywcCount
            },
            {
              name: '退单',
              type: 'bar',
              stack: '总量',
              color: ['#87CEFA'],
              label: {
                normal: {
                  show: false
                }
              },
              data: tdCount
            }
          ],
          grid: {
            top: 80
          }
        }
      },
      async getData(arg) {
        const params = {
          ...this.query
        }
        if (!this.query.happendDt) {
          this.$message.error('请选择查询日期!')
          return
        }

        const { status, data } = await callOrderList(params)
        if (status === 200) {
          this.chartsInit(data)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.callOrder {
  min-height: 100%;
  // display: flex;
  //  flex-direction: column;
  .chart-body {
    height: 600px;
    // flex: 1;
  }
}
</style>
